<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>检测报告列表</title>
    <link rel="stylesheet" href="/static/css/index.css" />
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/vue.min.js"></script>
    <script src="/static/js/vant.min.js"></script>
    <style>
        #app{
            height: 100vh;
            background-color: #f8f8f8;
        }
        .content {
            padding: 10px;
            height: calc(100vh - 100px);
            overflow: scroll;
            box-sizing: border-box;
        }
        .van-field__left-icon {
            display: flex;
            align-items: center;
        }
        .van-field__left-icon .van-icon{
            display: flex;
            align-items: center;
        }
        .van-nav-bar .van-icon {
            color: #333;
            font-size: 18px;
        }
        .van-nav-bar__title{
            font-size: 18px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #333333;
        }
    </style>
</head>
<body>
<div id="app">
    <van-nav-bar title="西医体检报告" left-arrow @click-left="onClickLeft" fixed placeholder></van-nav-bar>
    <form action="/">
        <van-search shape="round" v-model="kw" placeholder="请输入搜索关键词" @search="onSearch" @clear="clear"></van-search>
    </form>
    <div class="content">
        <van-list v-model="loading" :finished="finished" :finished-text="finishedText" @load="onLoad">
            <!-- <van-empty description="这里还没有相关记录哟" v-if="list.length <= 0 && !loading"></van-empty> -->
            <div>
                <van-cell-group v-for="item in list" :key="item.id" style="margin-bottom: 10px;" @click="openPdf(item)">
                    <van-cell :value="item.title" is-link> </van-cell>
                    <van-cell :value="item.test_date"></van-cell>
                </van-cell-group>
            </div>
        </van-list>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                kw: '',
                page: 1,
                list: [
                    //  {
                    // 	"id": 1,
                    // 	"title": "血糖检测",
                    // 	"test_date": "2024-01-26 15:06:01",//检测时间
                    // 	"pdf": "https:\/\/cn3app.wecardio.com:2808\/data\/9d\/6e\/90\/1e\/ac\/5e\/9d6e901eac5ead9dd82b7b6697f9039f_21888.pdf"
                    // }
                ],
                total: 0,
                loading: false,
                finished: false,
            }
        },
        mounted() {
            // this.getList()
        },
        computed:{
            finishedText(){
                return this.total <= 0 ? '这里还没有相关记录哟' : '没有更多了'
            }
        },
        methods: {
            onClickLeft() {
                history.back();
            },
            onLoad() {
                this.getList()
            },
            onSearch(val) {
                this.getList(true)
            },
            clear(){
                this.kw = ''
                this.getList(true)
            },
            getList(flag = false) {
                if(flag){
                    this.page = 1
                    this.list = []
                }
                this.loading = true
                axios.request({
                    method: "GET",
                    url: "/index/index/getLists",
                    params: {
                        page: this.page,
                        kw: this.kw
                    }
                })
                    .then((response) => {
                        console.log(response);
                        if (response.data.code == 1) {
                            this.list.push(...response.data.data)
                            this.total = response.data.total
                            this.finished = this.list.length >= this.total;
                        } else {
                            this.$toast.fail(response.data.msg);
                        }
                    }).catch(err => {
                    console.log(err);
                    this.$toast.fail('请求失败，请重试');
                    this.finished = true
                }).then(_=>{
                    // 加载状态结束
                    this.loading = false;
                })
            },
            openPdf(item) {
                window.open(item.pdf)
                //window.location.href = '/static/js/pdf/web/viewer.html?file=' + encodeURIComponent(item.pdf)
            }
        },
    })
</script>
</html>